<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>报表信息</title>
		<!-- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"> -->
		<script type="text/javascript" src="../../uni_webview.js"></script>
		<link rel="stylesheet" href="../css/vant.css">
		<script src="../js/vue.min.js"></script>
		<!-- https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart -->
		<script src="../js/vant.min.js"></script>
		<script src="../js/axios.js"></script>
		<script src="../utils/request.js"></script>

		<!-- vxe-table表格组件样式 -->
		<link type="text/css" href="../css/vxe-table.css" rel="stylesheet" />
		<!-- vxe-table表格组件js -->
		<script type="text/javascript" src="../js/xe-utils.js"></script>
		<script type="text/javascript" src="../js/vxe-table.js"></script>

		<!-- 引入vconsole -->
		<script type="text/javascript" src="../js/vconsole.min.js"></script>

		<script src="https://cdn.bootcdn.net/ajax/libs/qs/4.0.0/qs.min.js"></script>
	</head>
	<body>


		<div id="app">
			<div>
				<vxe-table class="vxeMainTable" :data="tableData" border resizable :height="clientHeight">
					<vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
					<vxe-table-column field="purchaser" title="采购业务员" width="120"></vxe-table-column>
					<vxe-table-column field="contractNo" title="需求清单号" width="120"></vxe-table-column>
					<vxe-table-column field="purchaseStatusLabel" title="状态" width="120"></vxe-table-column>
					<vxe-table-column field="programName" title="项目名称" width="120"></vxe-table-column>
					<vxe-table-column field="programNumber" title="项目编号" width="120"></vxe-table-column>
					<vxe-table-column field="contractCategory" title="类别" width="220"></vxe-table-column>
					<vxe-table-column field="supplier" title="供应商名称" width="250"></vxe-table-column>
					<vxe-table-column field="purchaseCorp" title="采购公司" width="250"></vxe-table-column>
					<vxe-table-column field="paymentCondition" title="付款条件" width="120"></vxe-table-column>
					<vxe-table-column field="purchaseAmount" title="合同总金额" width="120"></vxe-table-column>
					<vxe-table-column field="purchaseAmount" title="合同总金额" width="120"></vxe-table-column>
				</vxe-table>
			</div>
		</div>

		<script>
			var regisScrollEvent = (className, callback) => {

				document
					.getElementsByClassName(className)[0]
					?.querySelector('.vxe-table--body-wrapper')
					?.addEventListener(
						'scroll',
						(res) => {
							var height = res.target
							var clientHeight = height.clientHeight
							var scrollTop = height.scrollTop
							var scrollHeight = height.scrollHeight
							if (clientHeight + scrollTop + 1 >= scrollHeight) {
								callback()
							}
						},
						true,
					)

			}


			var vm = new Vue({
				el: '#app',
				mounted() {
					let _this = this
					_this.clientHeight = document.documentElement.clientHeight
					console.log('document.documentElement.clientHeight', document.documentElement.clientHeight)
					document.addEventListener('UniAppJSBridgeReady', function() {

						uni.getEnv(function(res) {
							if (res.plus) {
								_this.Token = plus.storage.getItem('App-Token'); //取数据
								console.log('当前环境为【5+App】');
								console.log('Token', _this.Token)
								_this.initData()
							} else if (res.miniprogram) {
								console.log('当前环境为【微信小程序】');
							}
						});

					});


					regisScrollEvent('vxeMainTable', () => this.touchSearch())
				},
				data() {
					return {
						Token: null,
						params: {
							page: 1,
							size: 15,
						},
						total: 0,
						tableData: [],
						clientHeight: 0,
					}
				},
				methods: {
					touchSearch() {
						console.log('touchSearch........');

						if (this.total > 0 && this.params.page < this.total / this.params.size) {
							console.log(this.params.page)
							this.params.page++
							this.initData()

						} else {
							vant.Toast({
								duration: 500,
								message: '没有更多数据了~',
							})
						}


					},
					initData() {
						let _this = this;
						// 自定义加载图标
						vant.Toast.loading({
							duration: 0,
							message: '加载中...',
							forbidClick: true,
							loadingType: 'spinner',
						});
						axios({
							method: 'post',
							headers: {
								'Authorization': 'Bearer ' + this.Token,
							},
							params: _this.params,
							data: {
								isDataFilter: true
							},
							url: "http://10.0.4.58/scm/api/v1/scmPurchaseContractHead/list",
						}).then(response => {
							if (response.data.code === 0) {
								_this.tableData.push(...response.data.data);
								_this.total = response.data.total
							}
							vant.Toast.clear()
						}).catch(response => {
							vant.Toast.clear()
							console.log('response',JSON.stringify(response) );
							if(response.status==401){
								vant.Toast({
									duration: 500,
									message: '用户认证失效~',
								})
								uni.postMessage({
									data: {
										action: 'navigateTo',
										id: '1001',
									}
								});
							}else{
								vant.Toast({
									duration: 500,
									message: '网络错误~',
								})
							}
						
							
						})
					},
					sendApp() {
						uni.postMessage({
							data: {
								action: 'main',
								message: '向App发送消息'
							}
						});
					},
					linkAbout() {
						window.location.href = "./about.html"
					},
					otherWebview() {
						uni.postMessage({
							data: {
								action: 'navigateTo',
								id: '2001',
							}
						});
					},
					login() {
						uni.postMessage({
							data: {
								action: 'navigateTo',
								id: '1001',
							}
						});
					},
				}

			})

			//通过 CDN 引入时不会自动注册 Lazyload 组件
			// 可以通过下面的方式手动注册
			Vue.use(vant.Lazyload);

			Vue.use(VXETable)
		</script>

	</body>
</html>